<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/my/my.css">

    <title>北京自考社区</title>
    <style>
        .my-list{
            height: auto;
            min-height: 800px;
            background-color: #FFFFFF;
        }
        .my-list-item{
            border: #E8E8ED solid 1px;
            min-height: 100px;
            padding: 8px;
        }
        .my-list-item-ul{
            padding-top: 20px;
            display: block;
            width: 60px;
            background-color: #F5F6F7;
            float: left;
            height: 80px;
            text-align: center;
            line-height: 24px;
        }
        .my-list-item-content{
            padding: 12px;
            margin-left: 60px;
            height: 100%;
        }
        .my-list-item-content h2{
            cursor: pointer;
        }

        .ask-question{
            width: 600px;
            position:absolute;
            top:50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -40px;
        }

        .my-cover{
            position: absolute; 
            left: 0px; 
            top: 0px;
            width: 100%;
            height: 100%;
            /* 遮罩层效果，父div透明，子div不透明,使用opacity: 0.3 会导致父子div都透明，不能实现效果
               父div使用background: rgba(0, 0, 0, 0.5); 可以实现父div透明，子div不透明的效果
            */
            /* opacity: 0.3;  */
            background: rgba(0, 0, 0, 0.5); 
            display: none; 
            z-index: 1000
        }
        .my-show-div{
            width: 80%; 
            margin-top: -400px;
            border: 1px solid #999; 
            display: none; 
            position: absolute; 
            top: 50%; 
            left: 10%; 
            z-index: 1002; 
            background: #fff;
            padding: 8px;
        }
        .question_info {
            display: block;
            margin: 0 0 10px 0;
            color: #999;
            font: normal 12px/24px Helvetica, Tahoma, Arial, sans-serif;
        }
        .q-content{
            width: 100%;
            height: 24px;
            overflow: hidden;
        }
        .q-content p{
            height: 24px;
            line-height: 24px;
            font-size: 14px;
        }
    </style>
</head>

<body>
<!-- header -->
<th:block th:include="common::header"></th:block>
    <!-- main -->
    <div class="layui-container re-layui-container my-main">
        <div class="my-main-content">
            <!-- 问题标签-->
            <span id="labelList" class="layui-breadcrumb re-layui-breadcrumb" lay-separator="|">
            </span><br/>
            <!--问题状态：是否已解决-->
            <span id="statusList" class="layui-breadcrumb re-layui-breadcrumb">
                <a id="" style="font-weight: bold" href="javascript:;">全部</a>
                <a id="0" href="javascript:;">未解决</a>
                <a id="1" href="javascript:;">已解决</a>
            </span>
            <!-- 问题列表 -->
            <div class="my-list" id="questionList">
            </div>
        </div>
        <div class="my-main-side">
            <div class="my-main-side-div">
                <div style="padding: 6px" class="my-adorn-status">
                    <p style="font-weight: bold">今日推荐</p>
                    <ul id="recomends">

                    </ul>
                </div>
                <div style="padding: 6px"  class="my-adorn-recom">
                    <p style="font-weight: bold">热门问答</p>
                    <ul id="hots">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- footer -->
    <th:block th:include="common::footer"></th:block>

    <!-- 弹窗代码 -->
    <!-- 遮罩层 
         遮罩层效果，父div透明，子div不透明
    -->
    <div id="cover" class="my-cover">
        <!-- 弹窗 -->
        <div id="show-div" class="my-show-div">
            <form class="layui-form" method="POST" action="javascript:;">
                <div class="layui-form-item" pane>
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入问题标题" autocomplete="off"
                        class="layui-input">
                    <input type="hidden" name="status" value="0" />
                </div>
                <div class="layui-form-item" pane>
                    <textarea name="text" id="askQuestion" style="display: none;"></textarea>
                </div>
    
                <div class="layui-form-item" pane>
                    <label class="layui-form-label">问题标签:</label>
                    <div class="layui-input-block">
                        <select name="tagId" lay-verify="required" lay-search>
                            <option value="">请选择</option>
                            <option th:each="tag:${tags}" th:text="${tag.name}"  th:value="${tag.id}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" pane>
                    <div class="layui-input-block">
                        <button class="layui-btn" onclick="btnCancel()">取消</button>
                        <button class="layui-btn" lay-submit lay-filter="confirm">确定</button>
                    </div>
                </div>
            </form>
       </div>
   </div>
</body>
<script src="/jquery-3.5.1.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/my/my.js"></script>
<script th:inline="javascript">
    // 初始化操作 - 页面加载完成执行
    $(document).ready(function () {
        // 处理搜索框的显示
        $("#input-search-form").attr("placeholder","搜索问题");
        // 处理顶部导航样式 如果是文章模板，就不显示样式
        var curPage = [[${curPage}]];
        if (curPage && curPage == "question"){
            $("#my-nav-item-2").addClass("layui-this");
        }

        // 渲染问题标签
        $.ajax({
            url: '/question/tag2/all',
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (res) {
                var _html = '<a id="" style="font-weight: bold" href="javascript:;">全部</a>';
                $.each(res.items,function (idx,item) {
                    _html += '<a id="'+item.id+'" href="javascript:;">'+ item.name +'</a>';
                })
                $("#labelList").html(_html);
            },
            error: function () {
                var _html = '<li>数据加载异常</li>';
                $("#labelList").html(_html);
            }
        });

        // 渲染今日推荐
        $.ajax({
            url: '/question/question/recommends',
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (items) {
                var _html = '';
                $.each(items,function (idx,item) {
                    _html += '<li style="margin: 6px 0px;cursor: pointer;"><a href="/question/question/showQuestion/'+item.id+'" target="_blank" class="layui-table-link">'+item.title+' </a><img style="width:14px;height: 14px;margin-top: -2px;" src="/images/readCountWhite.png"/>'+ item.pv + '</li>'
                })
                $("#recomends").html(_html);
            },
            error: function () {
                var _html = '<li>数据加载异常</li>';
                $("#recomends").html(_html);
            }
        });
        // 渲染热门问题
        $.ajax({
            url: '/question/question/hots',
            type: 'get',
            contentType: "application/json;charset=UTF-8",
            success: function (items) {
                var _html = '';
                $.each(items,function (idx,item) {
                    _html += '<li style="margin: 6px 0px;cursor: pointer;"><a href="/question/question/showQuestion/'+item.id+'" target="_blank" class="layui-table-link">'+item.title+' </a><img  style="width:14px;height: 14px;margin-top: -2px;" src="/images/readCountWhite.png"/>'+ item.totalPv + '</li>'
                })
                $("#hots").html(_html);
            },
            error: function () {
                var _html = '<li>数据加载异常</li>';
                $("#hots").html(_html);
            }
        });
    })

    layui.use(['element', 'table','layer','form','layedit','flow'], function () {
        var $ = layui.jquery;
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var layedit = layui.layedit;
        var form = layui.form;
        var flow = layui.flow;

        layedit.set({
            uploadImage: {
                url: '/common/sysfile/upload',
                type: 'post'
            },
        });
        var index = layedit.build('askQuestion');

        // 定义流加载函数，方便根据传入参数，多次动态加载
        var questionData = {};// 定义一个空对象，方便动态拼接流加载参数
        function flowLoad(questionData){
            flow.load({
                elem: '#questionList' //指定列表容器
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                    var list = [];
                    questionData.page = page;
                    questionData.limit = 10;
                    console.log("questionData:",questionData);
                    // var questionData = {
                    //     "page":page,
                    //     "limit":10
                    // }
                    $.ajax({
                        url: '/question/question/listForLayUI',
                        type: 'post',
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(questionData),
                        success: function (res) {
                            layui.each(res.data, function(index, item){
                                var statusStr = "";
                                var styleStr = "";
                                if (item.status == 0){
                                    statusStr = "未解决";
                                }else if (item.status == 1){
                                    statusStr = "已解决";
                                    styleStr = "style='background-color: #5FB878'";
                                }

                                var _html = "         <div class=\"my-list-item\">\n" +
                                    "                    <ul "+styleStr+" class=\"my-list-item-ul\">\n" +
                                    "                        <li>"+item.totalPv+"</li>\n" +
                                    "                        <li>"+ statusStr +"</li>\n" +
                                    "                    </ul>\n" +
                                    "                    <div class=\"my-list-item-content\">\n" +
                                    "                        <h2 onclick='showQuestion("+item.id+")' > "+item.title+" </h2>\n" +
                                    "                        <h4 class='question_info'>发布于: " + new Date(item.createTime).Format("yyyy-MM-dd hh:mm:ss") + " | 提问者：" + item.userName + "</h4>\n"+
                                    "                        <div class=\"q-content\">\n" + item.content +
                                    "                        </div>\n" +
                                    "                    </div>\n" +
                                    "                </div>";
                                list.push(_html);
                            });
                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(list.join(''), page < (res.count/10));
                        }
                    })
                }
            });
        }
        flowLoad(questionData);

        // 监听搜索框
        $(document).on('click','#search-btn',function(){
            var searchStr = $("#input-search-form").val();

            // 取消流加载，重新流加载
            $("#questionList").unbind();
            $("#questionList").html("");
            // 重新流加载
            questionData.searchStr = searchStr;
            flowLoad(questionData);
        });

        // 监听问题标签
        $(document).on('click','#labelList a',function(){
            var tagId = this.id;

            $("#labelList a").css("font-weight","normal");
            $(this).css("font-weight","bold");

            // 取消流加载，重新流加载
            $("#questionList").unbind();
            $("#questionList").html("");
            // 重新流加载
            questionData.tagId = tagId; // 给流加载定义参数
            flowLoad(questionData);
        });

        // 监听问题状态
        $(document).on('click','#statusList a',function(){
            var status = this.id;

            $("#statusList a").css("font-weight","normal");
            $(this).css("font-weight","bold");

            // 取消流加载，重新流加载
            $("#questionList").unbind();
            $("#questionList").html("");
            // 重新流加载
            questionData.status = status; // 给流加载定义参数
            flowLoad(questionData);
        });

        // 提交问题
        form.on('submit(confirm)', function (data) {
            data.field.content = layedit.getContent(index);

            $.ajax({
                url: '/question/question/save',
                type: 'post',
                async: false,
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(data.field),
                success: function (obj) {
                    layer.open({
                        type: 0,
                        content: "问题发布成功"
                    });
                },
                error: function () {
                    layer.open({
                        type: 0,
                        content: "问题发布失败"
                    });
                }
            });

            btnCancel();
        });
    });


    function askQuestion(){
        var user = [[${#httpSession.getAttribute('user')}]];
        if (!user) {
            layer.open({
                type: 0,
                content: "请先登录"
            });
        } else {
            showWindow();
        }
    }

    function btnCancel(){
        closeWindow();
    }

   // 弹窗
   function showWindow() {
        // 让遮罩层填满整个滚动屏幕 
        var w=document.body.scrollWidth ; 
        var h=document.body.scrollHeight;
        // 减去导航条的高度，因为导航条有滚动效果，需要减去一个导航条高度，才合适
        h = h-48;
        // 重新设置遮罩的高度
        $("#cover").css("height",h+"px");

        $('#show-div').show(); 
        $('#cover').css('display', 'block');
    }

    // 关闭弹窗
    function closeWindow() {
        $('#show-div').hide(); 
        $('#cover').css('display', 'none'); 
    }
    
    function showQuestion(p) {
        window.open('/question/question/showQuestion/'+p);
    }
</script>

</html>